<!DOCTYPE html>
<html lang = "zh-cmn-Hans" >
<head >
	<meta charset = "utf-8" />
	<title >暴富网盘</title >
	<meta content = "width=device-width, initial-scale=1" name = "viewport" >
	
	<link href = "bootstrap-3.3.7-dist/css/bootstrap.min.css" rel = "stylesheet" />
	<script src = "js/jquery.min.js" ></script >
	<script src = "bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script >
	<script src = "js/http.js" ></script >
	<script src = "https://cdn.jsdelivr.net/npm/vue" ></script >
</head >
<body >
<div >
	<nav class = "navbar navbar-default" >
		<div class = "container-fluid" >
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class = "navbar-header" >
				<button aria-expanded = "false" class = "navbar-toggle collapsed"
				        data-target = "#bs-example-navbar-collapse-1"
				        data-toggle = "collapse" type = "button" >
					<span class = "sr-only" >Toggle navigation</span >
					<span class = "icon-bar" ></span >
					<span class = "icon-bar" ></span >
					<span class = "icon-bar" ></span >
				</button >
				<img src = "img/logo.png" style = "width: 100px;height: 50px" >
			</div >
			
			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1" >
				<ul class = "nav navbar-nav" >
					<li ><a href = "#" >施工中</a ></li >
					<li class = "dropdown" >
						<a aria-expanded = "false" aria-haspopup = "true" class = "dropdown-toggle"
						   data-toggle = "dropdown"
						   href = "#" role = "button" >未开发 <span class = "caret" ></span ></a >
						<ul class = "dropdown-menu" >
							<li ><a href = "#" >Action</a ></li >
							<li ><a href = "#" >Another action</a ></li >
							<li ><a href = "#" >Something else here</a ></li >
							<li class = "divider" role = "separator" ></li >
							<li ><a href = "#" >Separated link</a ></li >
							<li class = "divider" role = "separator" ></li >
							<li ><a href = "#" >One more separated link</a ></li >
						</ul >
					</li >
				</ul >
				<ul class = "nav navbar-nav  col-lg-4" >
					<li class = "dropdown" >
						<a aria-expanded = "false" aria-haspopup = "true" class = "dropdown-toggle"
						   data-toggle = "dropdown"
						   href = "#" role = "button" ><i id = "userName" ></i ><span
								class = "caret" ></span ></a >
						<ul class = "dropdown-menu" >
							<li ><a href = "#" >个人中心</a ></li >
							<li ><a onclick = "SignOut()" >退出登录</a ></li >
							<li >
								<a data-target = "#myModal" data-toggle = "modal" onclick = "checkMyShareDetail()" >
									我的分享
								</a >
							</li >
						</ul >
					</li >
				</ul >
				
				<ul class = "nav navbar-nav navbar-right" >
					<li ><a href = "order.html" >会员中心</a ></li >
					<li class = "dropdown" >
						<a aria-expanded = "false" aria-haspopup = "true" class = "dropdown-toggle"
						   data-toggle = "dropdown"
						   href = "#" role = "button" >关于我们 <span class = "caret" ></span ></a >
						<ul class = "dropdown-menu" >
							<li ><a href = "#" >招商引资</a ></li >
							<li ><a href = "#" >加入我们</a ></li >
							<li ><a href = "#" >来点打赏</a ></li >
							<li class = "divider" role = "separator" ></li >
							<li ><a href = "#" >没有功能的地方</a ></li >
						</ul >
					</li >
				</ul >
			</div ><!-- /.navbar-collapse -->
		</div ><!-- /.container-fluid -->
	</nav >
</div >

<div aria-labelledby = "myModalLabel" class = "modal fade" id = "myModal" role = "dialog" tabindex = "-1" >
	<div class = "modal-dialog modal-lg" role = "document" >
		<div class = "modal-content" >
			<div class = "modal-header" >
				<button aria-label = "Close" class = "close" data-dismiss = "modal" type = "button" ><span
						aria-hidden = "true" >&times;</span ></button >
				<h4 class = "modal-title" id = "myModalLabel" >我的分享</h4 >
				<button onclick = "cancelShares()" >批量删除</button >
			</div >
			<div class = "modal-body" >
				<table class = "table table-bordered table-hover" width = "100%" >
					<thead >
					<tr >
						<td ><input name = "allSel" onchange = "cancelAll(this)" type = "checkbox" >全选</td >
						<td align = "center" >分享文件</td >
						<td align = "center" width = "25%" >链接</td >
						<td align = "center" >分享时间</td >
						<td align = "center" >失效时间</td >
						<td align = "center" >提取码</td >
						<td align = "center" >操作</td >
					</tr >
					</thead >
					<tbody id = "addList" >
					</tbody >
				</table >
			</div >
			<template id = "templateList" >
				<tr align = "center" >
					<td ><input name = "select" type = "checkbox" value = "{{id}}" ></td >
					<td >{{name}}</td >
					<td width = "25%" >{{url}}</td >
					<td >{{createTime}}</td >
					<td >{{deadline}}</td >
					<td >{{code}}</td >
					<td >
						<button onclick = "cancelShare({{id}})" >取消分享</button >
					</td >
				</tr >
			</template >
			<div class = "modal-footer" >
				<button class = "btn btn-primary" data-dismiss = "modal" type = "button" >关闭</button >
			</div >
		</div >
	</div >
</div >

<form id = "document" method = "post" >
	<div class = "jumbotron col-md-8 col-lg-offset-2" id = "vue" >
		<div >
			<div class = "btn-group" role = "group" >
				<button aria-expanded = "false" aria-haspopup = "true" class = "btn btn-default dropdown-toggle"
				        data-toggle = "dropdown" type = "button" >
					上传
					<span class = "caret" ></span >
				</button >
				<ul class="dropdown-menu">
					<li>
						<form id="uploadFrom" method="POST" enctype="multipart/form-data">
							<input id="file" type="file" name="file" onchange="doUpload(this.id)"  multiple="multiple" value="你好"/>
						</form>
					</li>
					<li>
						<form id="uploadFromtooMuch" method="POST" enctype="multipart/form-data">
							<input id="dir" type="file" name="file" onchange="doUploads(this.id)" webkitdirectory />
						</form>
					</li>
				</ul>
			</div >
			
			<div class = "btn-group" role = "group" >
				<button aria-expanded = "false" aria-haspopup = "true" class = "btn btn-default dropdown-toggle"
				        data-toggle = "dropdown" type = "button" >
					新建
					<span class = "caret" ></span >
				</button >
				<ul class = "dropdown-menu" >
					<li ><a href = "#" >新建文件夹</a ></li >
					<li ><a href = "#" >新建TXT文件</a ></li >
				</ul >
			</div >
			
			<div class = "btn-group" role = "group" >
				<button aria-expanded = "false" aria-haspopup = "true" class = "btn btn-default"
				        id = "submitbut" type = "button" onclick="submiting()">
					下载
				</button >
			</div >
			<div class = "btn-group" role = "group" >
				<button aria-expanded = "false" aria-haspopup = "true" class = "btn btn-default"
				        type = "button" >
					删除
				</button >
			</div >
			<div class = "btn-group" role = "group" >
				<button aria-expanded = "false" aria-haspopup = "true" class = "btn btn-default"
				        type = "button" >
					移动到
				</button >
			</div >
			<div class = "btn-group" role = "group" >
				<button aria-expanded = "false" aria-haspopup = "true" class = "btn btn-default"
				        type = "button" >
					复制到
				</button >
			</div >
			<div class = "btn-group" role = "group" >
				<button class = "btn btn-default" data-target = "#myModal2" data-toggle = "modal"
				        onclick = "showBOX()" type = "button" >
					分享
				</button >
			</div >
		</div >
		
		<!-- Modal -->
		<div aria-labelledby = "myModalLabel" class = "modal fade" id = "myModal2" role = "dialog" tabindex = "-1" >
			<div class = "modal-dialog" role = "document" >
				<div class = "modal-content" >
					<div class = "modal-header" >
						<button aria-label = "Close" class = "close" data-dismiss = "modal" type = "button" ><span
								aria-hidden = "true" >&times;</span ></button >
						<h4 class = "modal-title" id = "myModalLabel2" >分享文件</h4 >
					</div >
					<div class = "modal-body" >
						<div class = "submitBox" hidden >
							<div >
								提取码生成形式：
								<div >
									<label class = "radio-inline" >
										<input id = "inlineRadio1" name = "inlineRadioOptions" type = "radio"
										       v-model = "model.code" v-on:click = "hide()" value = "" > 系统子生成提取码
									</label >
								</div >
								<div >
									<label class = "radio-inline" >
										<input id = "inlineRadio2" name = "inlineRadioOptions" type = "radio"
										       v-on:click = "show()" value = "custom" > 自定义提取码
										<input class = "input-text" hidden type = "text" v-model = "model.code" >
										<p ></p >
									</label >
								</div >
								<div ><p ></p ></div >
							</div >
							<div >
								有效期：&emsp;&emsp;&emsp;&emsp;
								<label class = "radio-inline" >
									<input id = "inlineRadio4" name = "inlineRadioOptions1" type = "radio"
									       v-model = "model.aging" value = "forever" >永久有效
								</label >
								<label class = "radio-inline" >
									<input id = "inlineRadio5" name = "inlineRadioOptions1" type = "radio"
									       v-model = "model.aging" value = "30" > 30天
								</label >
								<label class = "radio-inline" >
									<input id = "inlineRadio6" name = "inlineRadioOptions1" type = "radio"
									       v-model = "model.aging" value = "7" > 7天
								</label >
								<label class = "radio-inline" >
									<input id = "inlineRadio7" name = "inlineRadioOptions1" type = "radio"
									       v-model = "model.aging" value = "1" > 1天
								</label >
							</div >
						</div >
					</div >
					<div class = "modal-footer" >
						<button class = "btn btn-default" data-dismiss = "modal" type = "button" >取消</button >
						<button class = "btn btn-primary" data-target = "#myModal1" data-toggle = "modal"
						        type = "button" v-on:click = "submit()" >确定
						</button >
					</div >
					<div aria-labelledby = "myModalLabel" class = "modal fade" id = "myModal1" role = "dialog"
					     tabindex = "-1" >
						<div class = "modal-dialog" role = "document" >
							<div class = "modal-content" >
								<div class = "modal-header" >
									<button aria-label = "Close" class = "close" data-dismiss = "modal"
									        type = "button" ><span aria-hidden = "true" >&times;</span ></button >
									<h4 class = "modal-title" id = "myModalLabel1" >Modal title</h4 >
								</div >
								<div class = "modal-body" >
									链接：<input type = "text" v-model = "model.link" >
									提取码：<input type = "text" v-model = "model.code" >
								</div >
								<div class = "modal-footer" >
									<button class = "btn btn-primary" data-dismiss = "modal" type = "button" >Close
									</button >
								</div >
							</div >
						</div >
					</div >
				</div >
			</div >
		</div >
		
		<div class = "table-responsive" >
			<br >
			<br >
			<table class = "table table-hover table-bordered" id = "" style = "background-color: white" >
				<thead >
				<tr >
					<th >
						<input lay-filter = "allChoose" lay-skin = "primary" name = "" type = "checkbox" >
					</th >
					<th >文件名</th >
					<th >大小</th >
					<th >修改日期</th >
				</tr >
				</thead >
				
				<tbody id = "documentList" >
				
				</tbody >
			</table >
		</div >
	</div >
</form >
<template id = "documentList_template" >
	<tr >
		<td >
			<input lay-filter = "allChoose" lay-skin = "primary" name = "html" onclick = "downloadDocument()"
			       type = "checkbox"
			       value = "{{documentId}}" >
		</td >
		<td >{{url}}</td >
		<td >{{documentSize}}</td >
		<td >{{documentDate}}</td >
	</tr >
</template >

</body >
</html >

<script >
	
	documentId = location.search.split("?documentId=")[1];
	if(documentId == null) {
		$.ajax({
			type: "post",
			url: "http://localhost:8080/netdisc/document/show/showDocumentByName",
			success: function(resp) {
				console.log(resp);
				let parse = JSON.parse(resp);
				showDocument(parse)
				console.log("documentId=" + documentId)
			}
		})
	} else {
		$.ajax({
			type: "post",
			url: "http://localhost:8080/netdisc/document/show/showDocumentById",
			data: {
				documentId: documentId,
			},
			success: function(resp) {
				let parse = JSON.parse(resp);
				console.log(parse)
				showDocument(parse)
			}
		})
	}
	
	function showDocument(documentList) {
		
		let documentListHtml = "";
		let url = documentList.message
		
		let showUrl = ""
		
		//获取模板标签
		let documentTemplate = $("#documentList_template").html();
		//遍历
		for(let i = 0; i < documentList.data.length; i ++) {
			
			showUrl = url + documentList.data[i].id;
			let documentHtml = "";
			
			//替换模板标签内容
			documentHtml = documentTemplate
					.replaceAll("{{documentId}}", documentList.data[i].id)
					.replaceAll("{{documentSize}}", documentList.data[i].size)
					.replaceAll("{{url}}", "<a>" + documentList.data[i].name + "</a>")
					.replaceAll("{{documentDate}}", documentList.data[i].modifyTime);
			
			if(documentList.data[i].isDirectory == 1) {
				//替换模板标签内容
				documentHtml = documentTemplate
						.replaceAll("{{documentId}}", documentList.data[i].id)
						.replaceAll("{{documentSize}}", documentList.data[i].size)
						.replaceAll("{{url}}", "<a href=\"" + showUrl + "\">" + documentList.data[i].name + "</a>")
						.replaceAll("{{documentDate}}", documentList.data[i].modifyTime);
				
				//拼接html
			}
			//拼接html
			documentListHtml += documentHtml;
		}
		//填充html到指定位置
		$("#documentList").html(documentListHtml);
		
	}
	
	let documentTempId = "";
	
	function downloadDocument() {
		documentTempId = "";
		$("input[name='html']:checked").each(function() {
			console.log($(this));
			documentTempId += $(this).val() + ",";
		});
		
		console.log(documentTempId);
		$("#document").attr("action", "http://localhost:8080/netdisc/document/document/download?documentId=" + documentTempId)
		
	}
	
	function submiting() {
		$("#document").submit();
	}
	
	/*$("#submitbut").click(function() {
		
		$("#document").submit();
	});*/

</script >

<!--获得用户名-->
<script >
	
	$(function() {
		let userName = getCookie("username");
		if(null != userName) {
			document.getElementById("userName").innerText = "用户:" + userName;
		}
	});
	
	function getCookie(name) {
		var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
		if(arr = document.cookie.match(reg))
			return unescape(arr[2]);
		else
			return null;
		
	};

</script >

<!--退出登录-->
<script >
	function SignOut() {
		delCookie("userId");
		delCookie("username");
		location.href = "login.html";
	}
	
	function delCookie(name) {                   //删除一个cookie
		var exp = new Date();
		exp.setTime(exp.getTime() - 1);
		var cval = getCookie(name);
		if(cval != null)
			document.cookie = name + "=" + cval + ";expires=" + exp.toUTCString();
	}

</script >

<!--查看列表-->
<script >
	function checkMyShareDetail() {
		<!--userIdVal暂时写死的数据，需要通过其他模块获取-->
		let userIdVal = getCookie("userId");
		$.ajax({
			type: "post",
			data: {
				userId: userIdVal
			},
			url: "http://localhost:8080/netdisc/share/share/details",
			success: function(resp) {
				let addList = $("#addList").html("");
				let templateList = $("#templateList").html();
				let parse = JSON.parse(resp);
				console.log(parse);
				for(let i = parse.data.length - 1; i >= 0; i --) {
					let data = new Date(parse.data[i].createTime);
					commonTime = data.toLocaleDateString();
					let deadline = parse.data[i].deadline;
					if(parse.data[i].deadline == 9999) {
						deadline = "永久有效";
					} else if(parse.data[i].deadline == 0) {
						deadline = "小于1天";
					} else {
						deadline = parse.data[i].deadline + "天后";
					}
					detailsList = templateList
							.replaceAll("{{id}}", parse.data[i].linkId)
							.replaceAll("{{name}}", parse.data[i].docName)
							.replaceAll("{{url}}", parse.data[i].link)
							.replaceAll("{{createTime}}", commonTime)
							.replaceAll("{{code}}", parse.data[i].verifyCode)
							.replaceAll("{{deadline}}", deadline)
					addList.append(detailsList);
				}
			}
		})
	}
	
	function cancelShare(id) {
		$.ajax({
			type: "post",
			data: {
				linkId: id
			},
			url: "http://localhost:8080/netdisc/share/share/cancel",
			success: function(resp) {
				let parse = JSON.parse(resp);
				checkMyShareDetail();
			}
		})
	}
	
	function cancelShares() {
		let checkboxList = $("input:checked");
		for(let i = 0; i < checkboxList.length; i ++) {
			let LinkId = checkboxList[i].attributes[1].nodeValue
			console.log(checkboxList.length)
			console.log(LinkId);
			cancelShare(LinkId);
		}
	}
	
	function cancelAll(allCheckBox) {
		let status = allCheckBox.checked;
		$("input[type='checkbox']").each(function(index, element) {
			element.checked = status;
		})
	}
</script >
<!--分享链接-->
<script >
	
	let documentId = "";
	$("input[name='html']:checked").each(function() {
		console.log($(this));
		documentId += $(this).val() + ",";
	});
	
	console.log(documentId);
	
	function showBOX() {
		$(".submitBox").show()
	}
	
	let vm = new Vue({
		el: '#vue',
		data() {
			return {
				model: {
					code: "",
					aging: "",
					fileID:"",
					userID: getCookie("userId"),
					link: "",
				}
			}
		},
		methods: {
			show: function() {
				$(".input-text").show();
				this.code = ""
			},
			hide: function() {
				$(".input-text").hide();
			},
			submit: function() {
				console.log(this.model.code)
				let codeVal = this.model.code;
				let agingVal = this.model.aging;
				let fileIdVal = documentTempId.substring(0,documentTempId.length-1)
				let userIdVal = this.model.userID;
				if(agingVal == "") {
					alert("未选择有效期")
					location.reload()
					return;
				}
				if(codeVal != "") {
					if(codeVal.length != 4) {
						alert("填写的提取码应为4位数")
						location.reload()
						return;
					}
				}
				let message = JSON.stringify({codeVal, agingVal, fileIdVal, userIdVal});
				let link;
				let code;
				$.ajax({
					contentType: 'application/json; charset=UTF-8',
					type: "post",
					data: message,
					url: "http://localhost:8080/netdisc/share/share/link",
					async: false,
					success: function(resp) {
						let parse = JSON.parse(resp);
						code = parse.data.verifyCode;
						link = parse.data.url;
					}
				})
				this.$set(this.model, "code", code)
				this.$set(this.model, "link", link)
			}
		},
	});
</script >

<!--上传文件-->
<script>
	function doUpload(resp){
		
		let files = document.getElementById(resp).files;
		console.log(files);
		let formData = new FormData();
		formData.append("upload",files[0])

		//let formData = new FormData($("#"+resp)[0]);
		let rootId = getCookie("rootId");
		console.log(rootId);
		formData.append("rootId",rootId)
		$.ajax({
			type:"post",
			url:"http://localhost:8080/netdisc/document/document/upload",
			data:formData,
			processData:false,
			cache:false,
			async:false,
			contentType:false,
			success: function (resp) {
				handlerResp(resp,show);
			},
			error:function (resp){
				alert("失败");
			}
		});
		
	}
	
	function doUploads(resp){
		let files = document.getElementById(resp).files;
		console.log(files);
		let formData = new FormData();
		formData.append("upload",files[0])
		
		//let formData = new FormData($("#"+resp)[0]);
		let rootId = getCookie("rootId");
		console.log(rootId);
		formData.append("rootId",rootId)
		$.ajax({
			type:"post",
			url:"http://localhost:8080/netdisc/document/document/folder",
			data:formData,
			processData:false,
			cache:false,
			async:false,
			contentType:false,
			success: function (resp) {
				handlerResp(resp,show);
			},
			error:function (resp){
				alert("上传失败");
			}
		});
	}
	
	function show(){
		alert("上传成功");
		location.reload();
	}
</script>